<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="短剧名称">
          <template slot="content">
            <el-select
              ref="select"
              v-model="formData.id"
              filterable
              multiple
              collapse-tags
              remote
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              size="small"
              clearable
              @focus="mobileClear"
              @hook:mounted="mobileClear"
              @visible-change="mobileClear"
            >
              <el-option
                v-for="item in optionsList.commonDataList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              > </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧属性">
          <template slot="content">
            <el-select
              v-model="formData.property_type"
              clearable
            >
              <el-option
                v-for="item in propertyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧类型">
          <template slot="content">
            <el-select
              v-model="formData.playlet_category"
              clearable
            >
              <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="上架状态">
          <template slot="content">
            <el-select
              v-model="formData.status"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="审核类型">
          <template slot="content">
            <el-select
              v-model="formData.playlet_type"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="标签">
          <template slot="content">
            <selectPlaylet
              type="tag"
              :is-resize="isResize"
              :reserve="false"
              :multiple="true"
              @result="tagsSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch()"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <!-- <el-tabs
        v-model="activeTab"
        class="tabs"
        @tab-click="tabChange"
      >
        <el-tab-pane
          label="全部短剧"
          name="all"
        ></el-tab-pane>
        <el-tab-pane
          label="待审核短剧"
          name="examine"
        ></el-tab-pane>
      </el-tabs> -->
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <!-- <el-button @click="add('recommend','推荐设置')">推荐设置</el-button>
          <el-button v-permission:playlet-rank @click="add('lineUp', '排行设置')">排行设置</el-button>
          <el-button v-permission:playlet-rank @click="add('hot', '热门设置')">热门设置</el-button>
          <el-button v-permission:playlet-rank @click="add('swiper', '轮播图设置')">轮播图设置</el-button> -->
          <el-button
            v-permission:playlet-up
            type="primary"
            @click="add('theater', '上架短剧')"
          >上架短剧</el-button>
        </div>
      </div>
    </Block>
    <!-- 全部短剧 -->
    <div class="table-table">
      <div class="table-conten">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:title="{ row }">
            <p
              style="color: #00BF8A; cursor: pointer"
              @click="showDetails(row)"
            >{{ row.title }}</p>
            <div
              class="rowFlex columnCenter"
              style="margin-top:3px;"
            >
              <p
                v-if="row.id"
                class="text"
                style="color:#4E5969;margin-right:10px;"
              >ID:{{ row.id }} <span style="margig:20px 0;">|</span> {{ row.upload_num }}集</p>
              <p
                v-if="row.status == 1"
                class="colorStatus"
              ><span class="indeter updating">更新中</span></p>
              <p
                v-if="row.status == 2"
                class="colorStatus"
              ><span class="success ended">已完结</span></p>
            </div>
          </template>
          <template v-slot:check_status_title="{ row }">
            <p>{{ row.type=='2'?'审核剧':'非审核剧' }}</p>
            <p
              v-if="row.check_status==0"
              class="colorStatus"
            ><span class="normal">未提审</span></p>

            <p
              v-else-if="row.check_status==1 || row.check_status==2"
              class="colorStatus"
            ><span class="indeter">{{ row.check_status==1?'提审中':'审核中' }}</span></p>
            <p
              v-else-if="row.check_status==3"
              class="colorStatus"
            >
              <span class="fail">审核驳回
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="popoverConten"
                  @show="onPopoverShow(row)"
                >
                  <i
                    slot="reference"
                    class="el-icon-question"
                    style="cursor: pointer; width: 16px !important;"
                  ></i>
                </el-popover>
              </span>
            </p>
            <p
              v-else-if="row.check_status==5"
              class="colorStatus"
            ><span class="fail">审核最终失败</span></p>
            <p
              v-else-if="row.check_status==4"
              class="colorStatus"
            ><span class="success">审核成功</span></p>
          </template>
          <template v-slot:main_playlet="{ row }">
            <p> {{ row.main_playlet.title }}</p>
            <p class="infoText">{{ row.main_playlet.id }}</p>
          </template>
          <template v-slot:version_playlet="{ row }">
            <p>{{ row.version_playlet.title }}</p>
            <p class="infoText">{{ row.version_playlet.id }}</p>
          </template>

          <template v-slot:zip="{ row }">
            <div>
              <el-button
                v-permission:playlet-up
                type="text"
                size="medium"
                :style="row.listing_status == 1 ? 'color:#F75F61;' : 'color:#06C261;'"
              >
                <p
                  v-if="row.listing_status == 1"
                  @click="onPlayletStatus(row)"
                >下架</p>
                <p
                  v-else
                  @click="onPlayletStatus(row)"
                >上架</p>
              </el-button>
              <el-button
                v-permission:playlet-payConfig
                type="text"
                size="medium"
                @click="add('paySet', '付费设置', row)"
              >付费设置</el-button>
              <el-button
                v-permission:playlet-analysis
                type="text"
                size="medium"
                @click="onAnalysis(row)"
              >剧集分析</el-button>
              <el-button
                v-if="row.listing_status == 1"
                v-permission:playlet-promoteLink
                type="text"
                size="medium"
                @click="add('theaterDetail', '生成推广链接', row)"
              >生成推广链接</el-button>

            </div>
          </template>
          <!-- <template v-slot:related_playlet="{ row }">
            <div v-if="row.related_playlet_text.length<=1" class="rowFlex columnCenter">
              <div v-for="item in row.related_playlet_text" :key="item.userid" class="userInfoStyle">
                <p class="textHidden rowFlex columnCenter userAlias" style="width:180px;"> {{ item.name }} </p>
                <p v-if="item.id" class="textHidden rowFlex columnCenter userAlias" style="color:#666666;margin-left:10px;">ID:{{ item.id }}</p>
              </div>
            </div>
            <el-popover
              v-else
              placement="right"
              trigger="click"
            >
              <div v-for="item in row.related_playlet_text" :key="item.userid" style="margin-bottom:10px;">
                <p class="textHidden rowFlex columnCenter userAlias"> {{ item.name }} </p>
                <p v-if="item.id" class="textHidden rowFlex columnCenter userAlias" style="color:#666666;margin-left:10px;">ID:{{ item.id }}</p>
              </div>
              <div slot="reference" style="font-size:14px;">
                <div>
                  <p style="color:#606266;font-weight:400;word-break: break-all;">{{ row.related_playlet_text[0].name }}</p>
                  <p v-if="row.related_playlet_text[0].id" style="color:#606266;font-weight:400;word-break: break-all;">ID:{{ row.related_playlet_text[0].id }}</p>
                </div>
                <el-button type="text"> +{{ row.related_playlet_text.length-1 }}</el-button>
              </div>
            </el-popover>
          </template> -->
          <template v-slot:status="{ row }">
            <div>
              <el-tag
                v-if="row.status == '2'"
                type="success"
                color="#E1FFF0"
                style="color: #06c261"
              >已完结</el-tag>
              <el-tag
                v-else
                type="warning"
                color="#FFFAE0"
                style="color: #ffa81d"
              >更新中</el-tag>
            </div>
          </template>
          <template v-slot:tags="{ row }">
            <el-tag
              v-for="(item,index) in row.tags"
              :key="index"
              class="playletTag"
            >{{ item.tag_title }}</el-tag>
          </template>
          <template v-slot:listing_status="{ row }">
            <div class="listing_status">
              <div
                class="status_type"
                :style="row.listing_status == 1 ? 'background-color: #06C261;' : 'background-color:#BFBFBF;'"
              ></div>
              <div>{{ row.listing_status == 1 ? '已上架' : '已下架' }}</div>
            </div>
          </template>
          <template v-slot:display="{ row }">
            <div
              v-if="row.display.length>0"
              class="rowFlex"
            >
              <div
                v-for="(item, index) in row.display"
                :key="index"
                class="rowFlex displayItem allCenter"
                style="margin-left:10px;"
              >
                {{ item.name }}
                <i
                  class="el-icon-close displayClose"
                  @click="banberConfirm(item,row)"
                ></i>
              </div>
            </div>
            <div v-else>
              --
            </div>
          </template>
        </BiTable>
      </div>
    </div>
    <BiDrawer
      v-model="drawer.lineUp"
      :drawer-title="drawer.title"
      :component="drawerComponent.lineUp"
      drawer-size="60%"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.hot"
      :drawer-title="drawer.title"
      :component="drawerComponent.hot"
      drawer-size="55%"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.swiper"
      :drawer-title="drawer.title"
      :component="drawerComponent.swiper"
      drawer-size="55%"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.theater"
      :drawer-title="drawer.title"
      :component="drawerComponent.theater"
      drawer-size="450px"
      :data="drawerRow"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.theaterDetail"
      :drawer-title="drawer.title"
      :component="drawerComponent.theaterDetail"
      :data="drawerRow"
      drawer-size="640"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.paySet"
      :drawer-title="drawer.title"
      :component="drawerComponent.paySet"
      drawer-size="500"
      :data="drawerRow"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.recommend"
      :drawer-title="drawer.title"
      :component="drawerComponent.recommend"
      drawer-size="55%"
      :data="drawerRow"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.submitExamine"
      :drawer-title="drawer.title"
      :component="drawerComponent.submitExamine"
      drawer-size="450px"
      :data="drawerRow"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import BiDrawer from '@/components/BiDrawer'
import { commonData } from '@/api/common'
import { delPlaylet } from '@/api/content'
import { GET_mini_app_playlet_index, UPDATA_mini_app_playlet_status, hidePlaylet, checkFailReason } from '@/api/appContent/theater'
import lineUp from './component/lineUp.vue'
import hot from './component/hot.vue'
import swiper from './component/swiper.vue'
import theater from './component/theater.vue'
import theaterDetail from './component/theaterDetails.vue'
import paySet from './component/PaySet.vue'
import { mapState } from 'vuex'
import { formatNumber } from '@/utils/index'
import recommend from './component/recommend.vue'
import submitExamine from './component/component/submitExamine.vue'
export default {
  name: 'AutoReplay',
  components: {
    BiDrawer
  },
  data() {
    return {
      formatNumber: formatNumber,
      formData: {
        property_type: '',
        playlet_type: '',
        status: '',
        playlet_category: '',
        id: [],
        tag_id: [],
        mini_app_id: window.localStorage.getItem('mini_app_id')
      },
      isResize: false,
      statusList: [
        { label: '全部', value: '' },
        { label: '已下架', value: 0 },
        { label: '已上架', value: 1 }
      ],
      typeList: [
        { label: '全部', value: '' },
        { label: '非审核剧', value: 1 },
        { label: '审核剧', value: 2 }
      ],
      popoverConten: '',
      optionList: [
        { label: '全部类型', value: '' },
        { label: '非审核剧', value: '1' },
        { label: '审核剧', value: '2' }
      ],
      drawer: {
        lineUp: false,
        hot: false,
        swiper: false,
        theater: false,
        theaterDetail: false,
        paySet: false,
        recommend: false,
        submitExamine: false
      },
      linkType: '1',
      drawerRow: {},
      loading: false,
      rowInfo: {},
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerComponent: {
        lineUp: lineUp,
        hot: hot,
        swiper: swiper,
        theater: theater,
        theaterDetail: theaterDetail,
        paySet: paySet,
        submitExamine: submitExamine,
        recommend: recommend
      },
      tableData: [],
      tableColums: [
        // {
        //   type: 'selection',
        //   width: 55
        // },
        {
          label: '封面',
          prop: 'cover',
          width: 70,
          render: (h, { row }) => {
            return <el-image src={row.cover} style='width:50px;border-radius:5px;'></el-image>
          }
        },
        {
          label: '短剧名称',
          prop: 'title',
          minWidth: 220,
          slotScope: true
        },
        // {
        //   label: '集数',
        //   prop: 'upload_num'
        // },
        {
          label: '审核类型',
          prop: 'type',
          render: (h, { row }) => {
            if (row.type == 1) {
              return <span>非审核剧</span>
            } else if (row.type == 2) {
              return <span>审核剧</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '短剧属性',
          prop: 'property_type',
          renderHeader: (h, { row }) => {
            return (
              <div>
                短剧属性
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content' class='tooltipLine'>
                    <p>合同剧：短剧底层，任意短剧都会归属为某部合同剧，可过审</p>
                    <p>版本剧：只能由合同剧新建，一个合同剧可以创建若干版本剧，可修改短剧内容，可过审</p>
                    <p>马甲剧：只能由版本剧新建，只能修改名称、封面，不可修改短剧内容，引用对应版本剧内容及过审信息</p>
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          width: 100,
          render: (h, { row }) => {
            if (row.property_type == 1) {
              return <span>合同剧</span>
            } else if (row.property_type == 2) {
              return <span>版本剧</span>
            } else if (row.property_type == 3) {
              return <span>马甲剧</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '归属合同',
          prop: 'main_playlet',
          width: 120,
          slotScope: true
        },
        {
          label: '归属版本剧',
          prop: 'version_playlet',
          width: 120,
          slotScope: true
        },
        // {
        //   label: '关联剧',
        //   prop: 'related_playlet',
        //   width: 180,
        //   slotScope: true,
        //   renderHeader: (h, { row }) => {
        //     return (
        //       <div>
        //         关联剧
        //         <el-tooltip class='item' effect='dark' placement='top'>
        //           <div slot='content'>
        //             <p>如果是合同剧显示关联的版本剧，如果是版本剧显示关联的合同剧</p>
        //           </div>
        //           <i class='el-icon-question' style='margin-left:5px;'></i>
        //         </el-tooltip>
        //       </div>
        //     )
        //   }
        // },
        {
          label: '短剧类型',
          width: 120,
          prop: 'playlet_category',
          render: (h, { row }) => {
            const playlet = this.categoryList.find((item) => item.value == row.playlet_category)
            if (playlet) {
              return <span>{playlet.label}</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '标签',
          prop: 'tags',
          width: 100,
          slotScope: true
        },
        {
          label: '上架状态',
          prop: 'listing_status',
          slotScope: true
        },

        {
          label: '展示位置',
          prop: 'display',
          width: 280,
          slotScope: true
        },
        {
          label: '开始付费剧集',
          prop: 'start_pay_chapter'
        },

        {
          label: '定价(虚拟币/集)',
          prop: 'pay_coin',
          render: (h, { row }) => {
            return <span>{formatNumber(row.pay_coin)} </span>
          }
        },
        {
          label: '操作',
          prop: 'zip',
          width: 220,
          fixed: 'right',
          slotScope: true
        }
      ],
      tableDataWait: [],
      optionsList: {
        serchList: [],
        commonDataList: []
      }
    }
  },
  watch: {
    resizeAPPList(newVal, oldVal) {
      if (newVal) {
        this.clickSearch()
      }
    }
  },
  computed: {
    ...mapState('content', ['resizeAPPList']),
    ...mapState('common', ['categoryList', 'propertyTypeList'])
  },
  mounted() {
    this.$AccessReport.report('zhangyu-appContent-theater', [this.$store.state.user.routerItem.name, '内容管理', '剧场管理'])
    this.clickSearch()
  },
  methods: {
    onAnalysis(data) {
      this.$router.push(`/appContent/analysis?playlet_id=${data.id}`)
    },
    tagsSelect(value) {
      this.formData.tag_id = value
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    async onPopoverShow(row) {
      const res = await checkFailReason({
        mini_playlet_id: row.mini_playlet_id
      })
      if (res.status_code === 1) {
        this.popoverConten = res.data.fail_reason
      }
    },
    async remoteMethod(query) {
      const res = await commonData({
        type: 'playlet',
        value: query,
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      if (res.status_code === 1) {
        this.optionsList.commonDataList = res.data.data.filter((item) => {
          return item.is_show == 1
        })
      }
    },
    submitExamine(row) {},
    startSearch() {
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0
      }
      this.clickSearch()
    },
    changeType() {
      this.clickSearch()
    },
    async clickSearch(type) {
      this.loading = true
      if (type === '查询') {
        this.page_info = {
          page: 1,
          page_size: 20,
          total: 0
        }
      }
      const data = {
        property_type: this.formData.property_type,
        status: this.formData.status,
        playlet_category: this.formData.playlet_category,
        page: this.page_info.page,
        page_size: this.page_info.page_size,
        playlet_id: this.formData.id,
        tag_id: this.formData.tag_id,
        playlet_type: this.formData.playlet_type,
        mini_app_id: window.localStorage.getItem('mini_app_id')
      }

      const res = await GET_mini_app_playlet_index(data)
      if (res.status_code === 1) {
        this.$set(this, 'tableData', res.data.data)
        for (let index = 0; index < this.tableData.length; index++) {
          this.tableData[index].related_playlet_text = []
          let item = {}
          if (this.tableData[index].related_playlet) {
            for (const key in this.tableData[index].related_playlet) {
              item = { id: key, name: this.tableData[index].related_playlet[key][0] }
              this.tableData[index].related_playlet_text.push(item)
            }
          }
        }
        // if (this.activeTab !== 'all') {
        //   this.tableData = res.data.data.filter((item) => item.check_status != '4')
        // } else {
        //   this.$set(this, 'tableData', res.data.data)
        // }
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    requestNextPage(pageInfo) {
      this.page_info.page = pageInfo.page
      this.clickSearch()
    },
    reset() {
      this.$set(this, 'formData', {
        property_type: '',
        playlet_type: '',
        status: '',
        playlet_category: '',
        id: [],
        tag_id: [],
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(value, title, row = {}, type) {
      type ? (this.linkType = type) : ''
      this.drawer[value] = true
      this.drawer.title = title
      this.drawerRow = row
    },
    showDetails(row) {
      console.log(row)
      this.drawer.theaterDetail = true
      this.drawer.title = '短剧详情'
      this.drawerRow = row
    },
    delRow(row) {
      delPlaylet({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.clickSearch()
          }, 2000)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    async hidePlaylet(item, row) {
      const res = await hidePlaylet({ type: item.type, playlet_id: row.id })
      console.log(res, 'res')
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.clickSearch()
      } else if (res.status_code == '41001') {
        this.$confirm(`该剧已添加运营任务，请在运营管理->任务签到->任务列表中，先关闭任务后，再下架短剧`, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
          .then((res) => {})
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    },
    banberConfirm(item, row) {
      this.$confirm(`确定将 ${row.title} 从 ${item.name} 栏位中下架么?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(123123)
          this.hidePlaylet(item, row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    onSubmit(data) {
      this.clickSearch()
    },
    async onPlayletStatusConfirm(row) {
      const res = await UPDATA_mini_app_playlet_status({
        listing_status: row.listing_status == 1 ? 0 : 1,
        mini_app_id: this.formData.mini_app_id || window.localStorage.getItem('mini_app_id'),
        playlet_id: row.id
      })
      if (res.status_code === 1 || res.status_code === 0) {
        this.$message.success(res.msg)
        this.clickSearch()
      } else if (res.status_code == '41001') {
        this.$confirm(`该剧已添加运营任务，请在运营管理->任务签到->任务列表中，先关闭任务后，再下架短剧`, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
          .then((res) => {})
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    },
    async onPlayletStatus(row) {
      // 下架
      this.$confirm(`确定将 ${row.title} 从 小程序中${row.listing_status == 1 ? '下' : '上'}架?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.onPlayletStatusConfirm(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>
  <style lang="scss" scoped>
.action-box {
  margin-bottom: 0 !important;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .userImage {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
.table-conten {
  padding: 20px;
  padding-top: 0;
  background-color: #fff;
}
.status_type {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 7px;
}
.listing_status {
  display: flex;
  align-items: center;
}
.displayItem {
  width: 60px;
  height: 28px;
  background: #f0f0f0;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  border-radius: 5px;
}
.changeTags {
}
.displayClose {
  font-size: 13px;
  cursor: pointer;
  color: #615f5f;
  margin-left: 3px;
}
</style>
